<template>
    <view class="ping-view flex-column">
        <z-paging @scroll="onPageScroll">
            <view class="header" v-if="!styleBackground">
                <view class="ping-right flex-row" @tap.stop="myPing">
                    <text class="ping-right-text">我的测评({{ pingLength }})</text>
                </view>
                <view class="title">学业测评</view>
            </view>
            <view class="header2" v-else>
                <view class="ping-right flex-row" @tap.stop="myPing">
                    <text class="ping-right-text">我的测评({{ pingLength }})</text>
                </view>
                <view class="title">学业测评</view>
            </view>
            <view class="introduce">
                <view class="introduce-t1">专业定位测评</view>
                <view class="introduce-t2">帮你更全面的认识自己，找到合适的专业方向。</view>
                <view class="introduce-t3">简要介绍</view>
                <view class="introduce-t4">
                    专业定位测评由霍兰德兴趣测评、MIDAS多元智能测评、MBTI职业性格测评、职业锚测评和学科强弱测评五个维度组成。系统在测评后，会依据每个维度给出参照性的建议，有利于考生和家长在专业定位和决策中进行参照。
                </view>
            </view>
            <view class="list-container">
                <view class="item" v-for="(item, index) in subsection" :key="index">
                    <view class="list-container-title">
                        <image
                            src="https://mcdn.chatgk.com/xcx/static/images/ping/title-bg.png"
                            class="title-bg"
                        ></image>
                        <view class="title-txt" @click="remaker(item)">{{ item.title.slice(0, 4) }}</view>
                        <image
                            src="https://mcdn.chatgk.com/xcx/static/images/ping/tip.png"
                            class="tip"
                            @click="remaker(item)"
                        ></image>
                        <image
                            src="https://mcdn.chatgk.com/xcx/static/images/ping/title-bg.png"
                            class="title-bg"
                        ></image>
                    </view>
                    <view class="list-container-content">
                        <view class="content-txt1">{{ item.txt1 }}</view>
                        <view class="content-txt2">{{ item.txt2 }}</view>
                    </view>
                    <image
                        :src="`https://mcdn.chatgk.com/xcx/static/images/ping/${item.imageName}.png`"
                        class="icon9"
                        :class="`icon9_${index}`"
                    ></image>
                </view>
            </view>
            <view class="fixed-icon" @tap="startPing">
                <image src="https://mcdn.chatgk.com/xcx/static/images/ping/p10.png" class="fixed-img"></image>
            </view>
        </z-paging>
        <view class="popup" v-if="openShow">
            <view class="popup-conrent">
                <view class="popup-title">
                    {{ title }}
                </view>
                <view class="content" v-html="popupHtml"></view>
                <view class="button" @click="openShow = false">
                    <text class="txt">我知道了</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import userManager from '/common/manager/user-manager.js';
import { PopupType } from './constance.js';

export default {
    data() {
        return {
            loadshow: false,
            isScrolled: false, // 控制是否滚动超过阈值
            openShow: false, // 控制是否滚动超过阈值
            pingLength: 0,
            popupHtml: '',
            title: '',
            navBackgroundColor: 'rgba(255, 255, 255, 0)', // 初始导航栏透明
            fontColor: false, // 导航栏文字颜色标志
            subsection: [
                {
                    imageName: 'p3-new',
                    type: 'xq',
                    title: '兴趣测评说明',
                    txt1: '霍兰德兴趣测评',
                    txt2: '，了解学生的兴趣，通过分析学生的兴趣类型，为推荐适合的专业方向提供依据。'
                },
                {
                    imageName: 'p4-new',
                    type: 'nl',
                    title: '能力测评说明',
                    txt1: 'MIDAS多元智能测评',
                    txt2: '‌‌用于了解学生的能力优势，从而推荐能够发挥其能力的专业。'
                },
                {
                    imageName: 'p5-new',
                    type: 'xg',
                    title: '性格测评说明',
                    txt1: 'MBTI职业性格测评',
                    txt2: '‌则侧重于了解学生的性格特点，通过性格分析来匹配适合的专业领域。'
                },
                {
                    imageName: 'p6-new',
                    type: 'zy',
                    title: '职业测评说明',
                    txt1: '职业锚测评',
                    txt2: '职业锚测评‌关注学生的职业价值观，为学生提供未来职业方向的专业指导。'
                },
                {
                    imageName: 'p7-new',
                    type: 'xk',
                    title: '学科测评说明',
                    txt1: '学科测评',
                    txt2: '对学生擅长的学科进行评估，以便在选择专业时考虑到学科的优势。'
                }
            ],
            styleBackground: false
        };
    },

    onShow() {
        if (getApp().globalData.userInfo) {
            this.getJudgeResInfo();
        }
    },
    onLoad() {
        uni.$on('pingUpdate', this.pingUpdate);
    },
    methods: {
        onPageScroll(e) {
            if (e.detail.scrollTop > 110) {
                this.styleBackground = true;
            } else {
                this.styleBackground = false;
            }
        },
        //查询测评信息
        async getJudgeResInfo() {
            this.loadshow = true;
            const res = await this.$request.judgeResInfoAPI();
            this.loadshow = false;
            this.pingLength = res.data.length;
        },
        remaker(item) {
            this.openShow = true;
            this.title = item.title;
            this.popupHtml = PopupType[item.type];
        },
        startPing() {
            uni.navigateTo({
                url: '/subpackages/subpackage1/pages/tabBar/ping/notice'
            });
        },

        myPing() {
            uni.navigateTo({
                url: '/pages/tabBar/wode/myPingList'
            });
        },
        pingUpdate() {
            setTimeout(() => {
                this.updatePing();
            }, 150);
        },

        updatePing() {
            const dataList = userManager.getPingInfo();
            this.pingLength = dataList ? dataList.length : 0;
        },

        tapPingResult(index) {
            const pingResult = this.dataList[index];
            uni.navigateTo({
                url: '/subpackages/subpackage1/pages/tabBar/ping/ping-result?uuid=' + pingResult.uuid
            });
        }
    }
};
</script>

<style lang="scss" scoped>
:deep(.z-paging-content) {
    background: #f8f8f8 !important;
}
.ping-view {
    /* 初始背景图 */
    :deep(.uni-navbar__header) {
        background: url('https://mcdn.chatgk.com/xcx/static/images/ping/p1.png') no-repeat center;
        background-size: cover;
        transition: background 0.3s ease;
    }

    :deep(.uni-nav-bar-text) {
        font-weight: 600;
        font-size: 32rpx;
        color: #333333;
        line-height: 44rpx;
        text-align: center;
        font-style: normal;
    }
    .ping-right {
        width: 100vw;
        text-align: right;
    }
    .ping-right-text {
        // width: 100%;
        font-weight: 600;
        font-size: 28rpx;
        color: #ff3b0a;
        line-height: 40rpx;
        text-align: right;
        font-style: normal;
        margin-left: 32rpx;
    }
    .header {
        background: url('https://mcdn.chatgk.com/xcx/static/images/ping/p1.png') no-repeat center;
        background-size: 100%;
        background-position: center bottom;
        background-color: rgba(250, 224, 193);
        transition: background 0.5s ease;
        height: 140rpx;
        width: 100%;
        // padding-top: 10rpx;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        position: fixed;
        top: -6rpx;
        z-index: 9998;
        padding-bottom: 24rpx;
        .title {
            margin-right: 15%;
            width: 100%;
        }
    }
    .header2 {
        background: #ffffff;
        height: 140rpx;
        width: 100%;
        // padding-top: 10rpx;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        position: fixed;
        top: -6rpx;
        z-index: 9999;
        padding-bottom: 24rpx;
        .title {
            margin-right: 15%;
            width: 100%;
        }
    }
    .introduce {
        width: 100%;
        height: 448rpx;
        margin-bottom: 24rpx;
        margin-top: 158rpx;
        background: url('https://mcdn.chatgk.com/xcx/static/images/ping/p2-new.png') no-repeat center;
        background-size: cover;
        padding: 0 32rpx;
        box-sizing: border-box;
        .introduce-t1 {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            width: fit-content;
            font-size: 48rpx;
            color: #ffffff;
            line-height: 66rpx;
            text-shadow: 0px 4px 8px rgba(255, 245, 148, 0.5);
            text-align: left;
            font-style: normal;
            background: linear-gradient(225.57059975314297deg, #ff3b0a 0%, #ffb60e 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 16rpx;
        }
        .introduce-t2 {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #ffb32d;
            line-height: 40rpx;
            text-shadow: 0px 4px 8px rgba(255, 191, 191, 0.5);
            text-align: left;
            font-style: normal;
            margin-bottom: 22rpx;
        }
        .introduce-t3 {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            width: fit-content;
            font-size: 28rpx;
            color: #ffffff;
            line-height: 40rpx;
            text-shadow: 0px 4px 8px rgba(255, 245, 148, 0.5);
            text-align: left;
            font-style: normal;
            background: linear-gradient(225.57059975314297deg, #ff3b0a 0%, #ffb60e 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 16rpx;
            margin-left: 22rpx;
            margin-top: 88rpx;
        }
        .introduce-t4 {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #8e2c00;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            margin-left: 16rpx;
            margin-right: 16rpx;
        }
    }
    .list-container {
        padding: 0 32rpx 64rpx 32rpx;
        display: flex;
        flex-direction: column;
        gap: 24rpx;
        .item {
            position: relative;
            width: 100%;
            background-color: #fff !important;
            padding: 32rpx;
            box-sizing: border-box;
            border-radius: 16rpx;
            .list-container-title {
                box-sizing: border-box;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 24rpx;
                .title-bg {
                    width: 46rpx;
                    height: 48rpx;
                }
                .title-txt {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 28rpx;
                    color: #333333;
                    line-height: 40rpx;
                    text-align: left;
                    font-style: normal;
                    margin-left: 64rpx;
                }
                .tip {
                    width: 24rpx;
                    height: 24rpx;
                    margin-left: 6rpx;
                    margin-right: 64rpx;
                    margin-bottom: 2rpx;
                }
            }
            .list-container-content {
                font-family: PingFangSC, PingFang SC;
                font-size: 28rpx;
                color: #333333;
                line-height: 40rpx;
                font-style: normal;
                margin-bottom: 32rpx;
                position: relative;
                text-align: center;
                background: url('https://mcdn.chatgk.com/xcx/static/images/ping/content-bg.png') no-repeat;
                background-position: left top;
                background-size: 208rpx 40rpx;
                .content-txt1 {
                    font-weight: 600;
                    display: inline;
                }
                .content-txt2 {
                    display: inline;
                }
            }
            .icon8 {
            }
            .icon9 {
                width: 100%;
                margin: auto;
            }
            .icon9_0 {
                height: 450rpx;
            }
            .icon9_1 {
                height: 480rpx;
            }
            .icon9_2 {
                height: 280rpx;
            }
            .icon9_3 {
                height: 450rpx;
            }
            .icon9_4 {
                height: 580rpx;
            }
        }
    }
    .fixed-icon {
        position: fixed;
        z-index: 999;
        bottom: 130rpx;
        right: 0;
        .fixed-img {
            width: 152rpx;
            height: 152rpx;
        }
    }
}
.popup {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;

    .popup-conrent {
        width: 574rpx;
        background: #ffffff;
        border-radius: 24rpx;
        padding: 40rpx;
        padding-bottom: 64rpx;
        height: 70%;
        overflow: auto;
        .popup-title {
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
            line-height: 40rpx;
            text-align: center;
            font-style: normal;
            margin-bottom: 16rpx;
        }

        .content {
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            margin-bottom: 40rpx;
            max-height: 930rpx;
            overflow: hidden;
            overflow-y: auto;
        }

        .button {
            width: 462rpx;
            height: 76rpx;
            background: #ff3b0a;
            border-radius: 38rpx;
            margin: 0 auto;
            line-height: 76rpx;
            font-weight: 600;
            font-size: 32rpx;
            color: #ffffff;
            text-align: center;
            z-index: 999;
            font-style: normal;
        }
    }
}
.retch {
    color: #666666;
    font-size: 24rpx;
    padding-bottom: 40rpx;
}
</style>
